<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>监控中心</title>
<link rel="stylesheet" href="<%=basePath%>/static/monitorpage/css/monitorpage.css">
</head>

<body>
 <!-- 引入js开始 -->
 <script src="<%=basePath%>/static/monitorpage/js/divShowHiden.js"></script>
 <script src="<%=basePath%>/static/monitorpage/js/shizhong.js"></script>
 <script src="<%=basePath%>/static/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
 <!-- 引入js结束 -->
 <div style="position:absolute; margin:auto;left:0;right:0;text-align:center;" >
 
 <div style="position:absolute; margin:auto;left:-800;right:0;width:150px;z-index:5;">
	<canvas id="myCanvas" width="150" height="150"></canvas>
</div>

 <div style="position:absolute; margin:auto;left:800;right:0;width:300px;z-index:5;margin-top: 10px">
	<h3>
	值班人员：${userName}
	<br/>
	手机号：${mobilePhoneNum}
	</h3>
</div>

 <h1>${message}&nbsp;&nbsp;
 <c:if test="${big != 'y'}">
 	<a href="${ctx}/inventory/hostInventory/listLoc?type=real&big=y" target="_Blank">全屏展示</a>
 </c:if>
 </h1> 
 

 <c:forEach var="item" items="${list}" >
 	<!-- 1父表格，每一排机柜信息都需要画在该表格内 -->
	<!-- 2tBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分 -->
	<!-- 3遍历出该排所有的机柜信息 -->
	<!-- 4td 每一个td标签代表一个单独的机柜信息 -->
	<!-- 5tr 每一个单独的TR代表一台监控物理机 -->
	<!-- 6根据机器的编号，比对当前吧遍历的左边是否满足 -->
	<table width="1774" height="430" border="1" align="center" cellpadding="2" cellspacing="0">
		<tbody>
			<tr align="center" valign="top">
				<div align="center"> <h2> 第  ${item.row} 排机柜</h2></div>
				<c:forEach begin="1" end="${item.cabinetCount}" var="i">
					<td  class="bac" id="${item.row}-${i}" width="100" >
						<table border="0" cellpadding="1" cellspacing="0" height="430" width="100">
								<td align="center" height="10" width="100" valign="bottom"></td>
								<c:forEach begin="1" end="10" var="j">
									<tr>
										<td class="jgtable" id="${item.row}-${i}-${j}" align="center" height="25" width="100" valign="bottom">
											<c:set value="${item.row}-${i}-${j}" var="hostnum"></c:set>
											<c:set value="${item[hostnum]}" var="hostmsg"></c:set>
											<c:if test="${not empty hostmsg }">
												<c:if test="${hostmsg.type == '6u'}">
													<img id="${hostmsg.hostName}" src="<%=basePath%>/static/monitorpage/images/6u_start.gif" style="vertical-align: bottom;" height="90" width="50"
													onmouseover="displayDIV('${hostmsg.serialNumber}'); return false" onmouseout="hiddenDIV('${hostmsg.serialNumber}'); return false"
													onclick="window.open('${ctx}/server/monitor/realtime?hostName=${hostmsg.hostName}&type=${hostmsg.category}')" >
												</c:if>
												<c:if test="${hostmsg.type == '2u'}">
													<img id="${hostmsg.hostName}" src="<%=basePath%>/static/monitorpage/images/2u_start.gif" style="vertical-align: bottom;" height="25" width="100"
													onmouseover="displayDIV('${hostmsg.serialNumber}'); return false" onmouseout="hiddenDIV('${hostmsg.serialNumber}'); return false"
													onclick="window.open('${ctx}/server/monitor/realtime?hostName=${hostmsg.hostName}&type=${hostmsg.category}')" >
												</c:if>
												<c:if test="${hostmsg.type == '1u'}">
													<img id="${hostmsg.hostName}" src="<%=basePath%>/static/monitorpage/images/1u_start.gif" style="vertical-align: bottom;" height="12" width="100"
													onmouseover="displayDIV('${hostmsg.serialNumber}'); return false" onmouseout="hiddenDIV('${hostmsg.serialNumber}'); return false"
													onclick="window.open('${ctx}/server/monitor/realtime?hostName=${hostmsg.hostName}&type=${hostmsg.category}')" >
												</c:if>
												<div id="${hostmsg.serialNumber}" class="msg">
												 	<table cellpadding="3" cellspacing="1">
												 		<tbody>
												 			<tr>
												 				<td>
												 					IP:${hostmsg.hostIp}
												 					<br>
												 					机器名称:${hostmsg.hostName}
												 					<br>
												 					操作系统:${hostmsg.sys}
												 					<br>
												 					位置:${hostmsg.serialNumber}
												 					<br>
												 					机型:${hostmsg.type}
												 					<%-- <br>
												 					监控是否监控:${hostmsg.isMonitoring}
												 					<br>
												 					监控状态:${hostmsg.status} --%>
												 				</td>
												 			</tr>
												 		</tbody>
												 	</table>
												</div>
											</c:if>
										</td>
									</tr>
								</c:forEach>
								<td align="center" height="25" width="100" valign="bottom"></td>
						</table>
					</td>
					
				</c:forEach>
			</tr>
		</tbody>
	</table>
 </c:forEach>

</div>

<canvas id="canvas" ></canvas>
<script type="text/javascript">
window.onload=function(){
	animation();
	statrt();
	window.setInterval(getAllSrc, 10000);
}

function changeSrc(imageId , stat) {
	var imsrc = document.getElementById(imageId).src;
	if(imsrc.indexOf("start.gif") > 0){
		document.getElementById(imageId).src=imsrc.replace("start.gif",(stat+".gif"));
	}else if(imsrc.indexOf("war.gif") > 0){
		document.getElementById(imageId).src=imsrc.replace("war.gif",(stat+".gif"));
	}else if(imsrc.indexOf("down.gif") > 0){
		document.getElementById(imageId).src=imsrc.replace("down.gif",(stat+".gif"));
	}else if(imsrc.indexOf("on.gif") > 0){
		document.getElementById(imageId).src=imsrc.replace("on.gif",(stat+".gif"));
	}
}

function getAllSrc() {
	
	$.ajax({
	    url: "${ctx}/zlmtHost/statusQuery/queryAllStatus" ,
	    type: 'POST',
	    dataType: 'json',
	    success: function(data){
	    	if(data != null){
	    		var arr = document.images;
		    	for(var i=0 ; i<arr.length ; i++){
		    		var imagesId = arr[i].id;
		    		var stat = data[imagesId];
		    		if(typeof(stat) != "undefined"){
		    			changeSrc(imagesId , stat);
		    		}
		    	}
	    	}
	    }
	});
	
}

/**
 * 动态酷炫背景图生成方法
 */
var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  w = canvas.width = 1920,
  h = canvas.height = 550*'${rowNum}',

  hue = 217,
  stars = [],
  count = 0,
  maxStars = 1200;

var canvas2 = document.createElement('canvas'),
  ctx2 = canvas2.getContext('2d');
canvas2.width = 1920;
canvas2.height = 550*'${rowNum}';
var half = canvas2.width / 2,
gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
gradient2.addColorStop(0.025, '#fff');
gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
gradient2.addColorStop(1, 'transparent');

ctx2.fillStyle = gradient2;
ctx2.beginPath();
ctx2.arc(half, half, half, 0, Math.PI * 2);
ctx2.fill();

// End cache

function random(min, max) {
  if (arguments.length < 2) {
    max = min;
    min = 0;
  }

  if (min > max) {
    var hold = max;
    max = min;
    min = hold;
  }

  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function maxOrbit(x, y) {
  var max = Math.max(x, y),
    diameter = Math.round(Math.sqrt(max * max + max * max));
  return diameter / 2;
}

var Star = function() {

  this.orbitRadius = random(maxOrbit(w, h));
  this.radius = random(60, this.orbitRadius) / 12;
  this.orbitX = w / 2;
  this.orbitY = h / 2;
  this.timePassed = random(0, maxStars);
  this.speed = random(this.orbitRadius) / 900000;
  this.alpha = random(2, 10) / 10;

  count++;
  stars[count] = this;
}

Star.prototype.draw = function() {
  var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
    twinkle = random(10);

  if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
  } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
  }

  ctx.globalAlpha = this.alpha;
  ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
  this.timePassed += this.speed;
}

for (var i = 0; i < maxStars; i++) {
  new Star();
}

function animation() {
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 0.8;
  ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
  ctx.fillRect(0, 0, w, h)

  ctx.globalCompositeOperation = 'lighter';
  for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
  };

  window.requestAnimationFrame(animation);
}

</script>
	
</body>
</html>
